<template>
    <el-dialog v-model="open" title="Payment fee" width="23%" align="center" draggable>
        <div class="rel">
            <span class="abs" style="left: 0px;">Total Amount:{{utils.currencType(sInfo.currencyType)}}{{ subTotal }}</span>
        </div>
        <div style="display: flex;margin-top:50px;" >
            <p>
                <span>Payment fee:</span>
                <el-input v-model="CalculatedNumber" style="width: 80px;margin-left:4px;" />
            </p>
            <p style="margin-left:10px;">
                <el-button @click="paymentFeecompute" style="width: 80px;margin-left: 4px;">4.4%+0.1</el-button>
            </p>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="paymentFeeSave">Save</el-button>
                <el-button @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
import * as utils from '../../utils'
const open = ref(false)
const ratio = ref(0.144)
const CalculatedNumber = ref('')

const props = defineProps({
    subTotal: Number,
    sInfo:Object
})
const emits = defineEmits(['paymentFeeSave', 'paymentFeecompute'])

const paymentFeecompute = () => {
    emits('paymentFeecompute')
}
const paymentFeeSave = () => {
    emits('paymentFeeSave', 'payment_fee')
}
const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
defineExpose(
    {
        open,
        ratio,
        CalculatedNumber,
        dialogopen
    }
)
</script>
<style>
.el-dialog__footer {
    margin-top: 10px;
}
</style>